
<template>
  <div class="togetherDonate">
    <div>
      <div class="head">
        <i class="iconfont head-icon" @click="comeback">&#xe689;</i>
        <span>{{obj.eventName}}</span>
      </div>
      <!--<div style="height: 300px;">-->
        <!--<schart :canvasId="canvasId"-->
                <!--:type="type"-->
                <!--:width="width"-->
                <!--:height="height"-->
                <!--:data="data"-->
                <!--:options="options"-->
        <!--&gt;</schart>-->
      <!--</div>-->

      <!--<div class="flex-container">-->
        <!--<div class="flex-item" v-for="stores in store">-->
          <!--<div class="o2o7">{{stores.storeId}}店</div>-->
          <!--<div class="y864">-->
            <!--<p>{{stores.storeName}}</p>-->
            <!--<p><span class="spp">{{stores.money}}</span>元</p>-->
          <!--</div>-->
        <!--</div>-->
        <!--</div>-->
     <!--头部— 天恒公益-->
      <div class="th-box">
        <img v-show="showLogo" style="position:absolute; top: 42px; left:0px;height:30px;width: 30px;" src="http://tsw-qqc.oss-cn-hangzhou.aliyuncs.com/userfiles/2018/3/1522229746.png"/>
        <img :src="obj.eventPicUrl" alt="">
        <!--<img v-if="typeof(tolists.eventPicUrl) == 'string' && tolists.eventPicUrl != '' && tolists.eventPicUrl.indexOf('http') != -1" :src="tolists.eventPicUrl" alt="">-->
        <!--<img v-else-if="typeof(tolists.eventPicUrl) == 'string' && tolists.eventPicUrl!= '' && tolists.eventPicUrl.indexOf('http') == -1" :src="imageUrl.eventPicUrl + tolists.eventPicUrl" alt="">-->
        <!--<img v-else="" src="../../images/tianheng.png" alt="">-->
        <div class="zjs">
          <div style="margin: 0px 5px;color: #333333"><span style="color: #333333;font-size: 17px">{{firstWord}}</span>{{endWord}}</div>
        <!-- <router-link :to="{path: 'http://wx.5dtianheng.com/WX/OutLink?ID=4', query: {header: '国珍天恒公益计划',id:'70101bec9c874a58bf8924ff879d9a4b'}}">-->

            <div class="chakan" @click="goDetail()" v-show="showDetail">
              <div>查看详情</div>
            </div>

        </div>
      </div>
      <!--募捐 &#45;&#45; 公益 &#45;&#45; 捐助 &#45;&#45; 天恒公益站-->
      <div class="xrb-box" v-if="event_id == '2fc92c2a95c14c6698f123dd34f5f248'">
        <img src="../../images/xiaorongbei.png" alt="">
        <div class="mgjt-box">
          <div style="display: flex;align-items: center;">
            <div class="mm">
              <!--<div class="m-box">
                <img src="../../images/zonge.png" alt="">
              </div>-->
            <div class="zonge">
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">募捐总额：</div>
                <div style="color:#ff651a;font-size: 18px;font-weight: bold;">{{obj.raiseMoney }}</div>
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">&nbsp;元</div>
              </div>
            </div>
          </div>
          <div style="display: flex;align-items: center;">
            <div class="mm">
              <!--<div class="m-box">
                <img src="../../images/gongyi.png" alt="">
              </div>-->
              <div class="zonge">
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">公益行动：</div>
                <div style="color:#ff651a;font-size: 18px;font-weight: bold;">{{obj.day}}</div>
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">&nbsp;天</div>
              </div>
            </div>
          </div>
         <!-- <div style="display: flex;align-items: center;">
            <div class="mm">
              <div class="m-box">
                <img src="../../images/juanzhu.png" alt="">
              </div>
              <div class="zonge">
                &lt;!&ndash;<div style="color:#53433b;font-size: 16px">捐助小学：</div>&ndash;&gt;
                <div style="color:#ff651a;font-size: 18px">12</div>
                <div style="color:#53433b;font-size: 16px">所</div>
              </div>
            </div>
          </div>-->
          <div style="display: flex;align-items: center;">
            <div class="mm">
              <!--<div class="m-box">
                <img src="../../images/zongshu.png" alt="">
              </div>-->
              <div class="zonge">
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">天恒公益站：</div>
                <div style="color:#ff651a;font-size: 18px;font-weight: bold;">{{obj.storeCount}}</div>
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">&nbsp;个</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="xrb-box" v-if="event_id == '4847d85f5b3e45a3bfae9400a2b89a18'">
        <img src="../../images/xiaorongbei.png" alt="">
        <div class="mgjt-box" style="top:513px;">
          <div style="display: flex;align-items: center;">
            <div class="mm">
              <!--<div class="m-box">
                <img src="../../images/zonge.png" alt="">
              </div>-->
            <div class="zonge">
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">募捐总额：</div>
                <div style="color:#ff651a;font-size: 18px;font-weight: bold;">{{obj.raiseMoney }}</div>
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">&nbsp;元</div>
              </div>
            </div>
          </div>

          <div style="display: flex;align-items: center;">
            <div class="mm">
              <!--<div class="m-box">
                <img src="../../images/zongshu.png" alt="">
              </div>-->
              <div class="zonge">
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">支教团队：</div>
                <div style="color:#ff651a;font-size: 18px;font-weight: bold;">{{obj.storeCount}}</div>
                <div style="color:#452E1D;font-size: 16px;font-weight: bold;">&nbsp;个</div>
              </div>
            </div>
          </div>
        </div>
      </div>
       <!--tab切换以及切换内容-->
      <div v-if="tolist.length <= 1">
        <tab v-show="showTab">
               <tab-item selected @on-item-click="witchShow('0')">全国</tab-item>
               <tab-item @on-item-click="witchShow(area.value)" v-for="area in obj.areaDict">{{area.name}}</tab-item>
         </tab>
        <div class="zhandian-box" v-for="list in obj.stores"  v-if="event_id == '2fc92c2a95c14c6698f123dd34f5f248'">
          <div class="zd-box" >
            <div class="mingcheng">
            {{list.storeName}}
            </div>
            <div class="da_box">
              <div class="progress_box">
                <div class="weui-progress">
                  <div class="weui-progress__bar">
                    <x-progress  :percent="list.schedule" :show-cancel="false"></x-progress>
                  </div>
                </div>
              </div>
            </div>
            <div class="yuan">{{list.money}}元</div>
          </div>
          <div class="zz-box">
            <div :class="donateClass" @click="primaryshow(list.storeId)">
              <span>捐助</span>
            </div>
            <div class="juan">共{{list.countPeople}}人捐助&nbsp;<span v-if="showArea == 1">({{list.storeArea}})</span></div>
          </div>
        </div>

         <div class="zhandian-box" v-for="(list,index) in obj.stores"  v-if="event_id == '4847d85f5b3e45a3bfae9400a2b89a18'">
                  <div class="" >
                    <div class="mingcheng" style="width:316px;padding-left:0px;" @click="primaryshow(list.storeId)">
                          {{list.storeName}}
                    </div>
                    <div style="display:flex;">
                    <div class="da_box" style="width:53%;">
                      <div class="progress_box" style="width: 222px;">
                        <div class="weui-progress">
                          <div class="weui-progress__bar">
                            <x-progress  :percent="list.schedule" :show-cancel="false"></x-progress>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="yuan" style="margin-top:-7px;width:47%">{{list.money}}元</div>
                    </div>
                  </div>
                  <div class="zz-box" style="width:353px;height:27px;position:relative">
                    <div :class="donateClass" @click="primaryshow(list.storeId)">
                      <span>捐助</span>
                    </div>
                    <div class="juan" style="position: absolute;left: 10rem;">共{{list.countPeople}}人捐助&nbsp;</div>
                  </div>
                </div>
      </div>
      <div  style="border-bottom: 1px solid #cccccc;padding-bottom: 60px;" v-if="event_id == '4847d85f5b3e45a3bfae9400a2b89a18'"></div>
      <!--往期活动-->
      <div style="border-bottom: 1px solid #cccccc;padding-bottom: 60px;" v-show="showHistory">
        <img @click="goDetails()" src="http://tsw-qqc.oss-cn-hangzhou.aliyuncs.com/userfiles/2018/3/1522316738.jpg" width="100%;"/>
       <!-- <div class="wangqi">
          <span style="float: left;text-indent: 10px;font-size: 18px;color: #1AAC19;cursor: pointer">往期活动</span>
          &lt;!&ndash;<span style="float: right;font-size: 15px;color: #1AAC19;border: 1px solid #1AAC19;padding: 0px 8px;cursor: pointer">更多</span>&ndash;&gt;
        </div>-->
      </div>

      <!--<div class="er">
          <ul>
            <li @click="goDetails(list.activityId)" v-for="list in obj.activityResults" >
              <div class="im-box">
                <div class="imgg-box">
                  <img :src="imageUrl.imageUrl + list.picture" alt="">
                </div>
                <div class="zqp" >
                  <div>{{list.title}}</div>
                  <div style="text-align: right;font-size: 10px;">{{list.createDate}}</div>
                </div>
              </div>
            </li>
          </ul>
      </div>-->
       <!--我要捐款-->
        <div class="btn" @click="wantJuank">
          <x-button type="primary"><i class="iconfont head-icon"
                                                                 style="font-size: 16px">&#xe627;</i> 个人中心
          </x-button>
               <!--<i class="iconfont head-icon"
                  style="font-size: 16px;"></i>
               <span>个人中心</span>-->
        </div>

      <div class="popup">
        <div>
          <popup v-model="showj" :hide-on-blur=true>
            <div class="popup2">
              <group>
                <cell title="请输入捐款金额">
                  <x-icon type="ios-close-empty" size="24" @click="isShow"></x-icon>
                </cell>
              </group>
              <checker
                style="padding-top: 10px"
                v-model="demo"
                default-item-class="demo5-item"
                selected-item-class="itemselected"
                :radio-required="true"
              >
                <checker-item v-for="i in [10, 20, 50, 100, 1000]"  :value="i">{{i}}元</checker-item>
                <checker-item class="qitajine" :value="textMoney" v-bind:class="{ itemselected: ifselected}">
                  <input type="text" @keyup="keyups" @blur="blurs"  placeholder="其他金额" style="width: 66%;height: 73%;border: none;" v-model="textMoney">
                </checker-item>
              </checker>
              <x-button type="primary" @click.native="primary">立刻捐款</x-button>
              <div>
                <input type="checkbox" value="" v-model="checkOK"  style="margin-bottom: 2px">
                <span style="color: #999999;font-size: 14px">同意并接受</span>
                <em style="font-size: 14px">《亲青筹用户协议》</em>
              </div>
              <!--适应苹果手机-->
              <div style="width: 100%;height: 20px"> </div>
            </div>
          </popup>
        </div>
      </div>
  </div>
  </div>
</template>



<style lang="scss" src="./togetherShop.scss"></style>
<script src="./togetherShop.js"></script>
